<template>
	<view>
		<!-- 地址 -->
		<view class="address">
			<view class="iconadd">
				<image style="width: 25rpx;" src="../../static/pay/address.png" mode="widthFix"></image>
			</view>
			<view class="info">
				<view>
					<text>小神乐</text>
					<text style="margin-left: 40rpx;">15255253562</text>
				</view>
				<view class="add_detail">安徽省合肥市包河区 高速中央广场安徽省合肥市包河区安徽省合肥市包河区安徽省合肥市包河区</view>
			</view>
			<view>
				<image style="width: 18rpx;" src="../../static/pay/icon_right.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="product_box">
			<view>
				<image style="width: 161rpx; height: 161rpx;" src="../../static/index2.png" mode="aspectFill"></image>
			</view>
			<view class="product_details">
				<view class="product_name">PITAKA苹果iPhone12/Pro/Max/mini手机壳凯夫拉细纹碳纤维magsafe保护套 iPhone12 Pro Max【非磁吸款</view>
				<view class="product_specs">全网通(8+521G)无线充套装</view>
				<view class="product_price">500积分</view>
			</view>
		</view>
		<!-- 规格 -->
		<view class="guige_box">
			<view class="guige">
				<view class="text">支付方式</view>
				<view class="number">积分支付</view>
			</view>
			<view class="guige">
				<view class="text">积分(共{{total}}积分)</view>
				<view class="number">-500积分</view>
			</view>
			<view class="guige">
				<view class="text">运费</view>
				<view class="number">￥0.00</view>
			</view>
			
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="payment_bottom">
				<text class="shifu">实付</text>
				<text class="shifu shifu_price">500积分</text>
			</view>
			<view class="submit">提交订单</view>
		</view>
	</view>
</template>

<script>
	import {selectUserInfo} from "../../api/user.js"
	export default{
		data() {
			return {
				total:''
			}
		},
		onLoad() {
			this.getYunTotal();
		},
		methods: {
			getYunTotal(){
				this.get(selectUserInfo).then(res=>{
					console.log(res);
					this.total=res.data.points
				})
			}
		},
	}
</script>

<style scoped="">
	.address{
		width: 690rpx;
		margin: 26rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.info{
		width: 600rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
	}
	.iconadd{
		position: relative;
		top: -20rpx;
	}
	.add_detail{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-top: 12rpx;
	}
	.product_box{
		width: 690rpx;
		height: 161rpx;
		margin: 60rpx auto 0;
		display: flex;
		/* align-items: center; */
	}
	.product_details{
		margin-left: 30rpx;
	}
	.product_name{
		font-size: 26rpx;
		font-weight: 800;
		color: #333333;
		overflow: hidden;  
		text-overflow: ellipsis;  
		display: -webkit-box;  
		-webkit-line-clamp: 2;  
		-webkit-box-orient: vertical; 
	}
	.product_specs{
		font-size: 22rpx;
		font-weight: 400;
		color: #666666;
		margin-top: 14rpx;
	}
	.product_price{
		font-size: 32rpx;
		font-weight: bold;
		color: #F0812D;
		margin-top: 10rpx;
	}
	.guige_box{
		width: 690rpx;
		margin: 130rpx auto 0;
	}
	.guige{
		width: 690rpx;
		margin: 45rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.text{
		font-size: 26rpx;
		font-weight: 600;
		color: #666666;
	}
	.number{
		font-size: 28rpx;
		font-weight: 800;
		color: #000000;
	}
	.bottom{
		width: 750rpx;
		height: 88rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #F6F6F6;
		line-height: 88rpx;
		display: flex;
	}
	.payment_bottom{
		width: 507rpx;
		padding-left: 30rpx;
	}
	.shifu{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.shifu_price{
		margin-left: 10rpx;
	}
	.submit{
		width: 243rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #F3C44E 0%, #F18D29 53%, #ED6138 100%);
		z-index: 3;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
